<template>
	<view class="Newsdcomp-container">
		
		<view class="article-topsection">
			
			<h3 class="title">{{ title }}</h3>
			<view class="info">
				<span class="time">时间：{{ datetime }}</span>
				<span class="source">来源：{{ source }}</span>
			</view>
			
		</view>
		
		<view class="article-botsection">
			
			<view class="image">
				<image mode="widthFix" :src="img_url"></image>
			</view>
			<view class="content">
				<text>{{ content }}</text>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name: 'newsarticle',
		props: {
			title: {
				default: '',
				type: String
			},
			source: {
				default: '',
				type: String
			},
			datetime: {
				default: '',
				type: String
			},
			img_url: {
				default: '',
				type: String
			},
			content: {
				default: '',
				type: String
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.Newsdcomp-container {
		width: 100%;
		
		.article-topsection {
			width: 100%;
			.title {
				width: 90%;
				text-align: center;
				margin: 20rpx auto;
			}
			.info {
				margin-bottom: 30rpx;
			  text-align: center;
				font-size: 13px;
				color: #929298;
			  .source {
			    margin-left: 30rpx;
			  }
			}
		}
		
		.article-botsection {
			.image {
				width: 90%;
				margin: 30rpx auto;
				image {
					width: 100%;
				}
			}
			.content {
				margin: 0 auto;
				width: 90%;
			}
		}
		
	}
	
</style>
